<template>
    <div class="operateMine">
        <div class="operateMine_top">
            <div class="operateMine_top_user">
                <van-image class="user_img" :src="userInfo?.avatarUrl" round fit="cover" />
                <div class="user_box">
                    <div class="user_box_title">{{ userInfo?.nickName }}</div>
                    <div class="user_box_text">{{ userInfo?.nickName }}｜{{ roles.roleName }}</div>
                </div>
            </div>
            <div class="operateMine_top_frequency">
                <div class="frequency_label">周选品次数</div>
                <div class="frequency_value">
                    <span>{{ weekSelectionNum }}</span>
                    次
                </div>
            </div>
        </div>
        <div class="operateMine_tabbar">
            <div class="operateMine_tabbar_item">
                <img src="@/assets/operation/icon_bujihuanjia.png" alt="">
                <div class="item_text">不还计价</div>
            </div>
            <div class="operateMine_tabbar_item">
                <img src="@/assets/operation/icon_shoumaishuju.png" alt="">
                <div class="item_text">售卖数据</div>
            </div>
            <div class="operateMine_tabbar_item" @click="routerTo('/operationApproval')">
                <img src="@/assets/operation/icon_shenpishuju.png" alt="">
                <div class="item_text">审批中心</div>
            </div>
            <div class="operateMine_tabbar_item">
                <img src="@/assets/operation/icon_paipinshuju.png" alt="">
                <div class="item_text">排品数据</div>
            </div>
        </div>
        <div class="operateMine_back">
            <div class="operateMine_box">
                <div class="box_title">更多功能</div>
                <div class="box_item" @click="routerTo('/notice')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_xiaoxizhongxin.png" alt="">
                        消息中心
                    </div>
                    <div class="box_item_right">
                        <span v-if="commissionNum != 0">{{ commissionNum }}</span>
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
                <div class="box_item" @click="routerTo('/profile')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_gerenzhongxin.png" alt="">
                        个人信息
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
                <div class="box_item" @click="routerTo('/feedback')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_jianyiyufankui.png" alt="">
                        建议与反馈
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
                <!-- <div class="box_item" @click="routerTo('/bagzhu')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_bangzhuzhongxin.png" alt="">
                        帮助中心
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div> -->
                <div class="box_item" @click="routerTo('/setIndex')">
                    <div class="box_item_left">
                        <img class="left_img" src="@/assets/operation/icon_shezhi.png" alt="">
                        设置
                    </div>
                    <div class="box_item_right">
                        <img class="right_img" src="@/assets/operation/icon_huisejiantou.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getInfo } from "@/api/supplierList/index";
import { getWeekCount, queryDeptCount } from "@/api/operation/index";
import { useRouter } from 'vue-router'
import { showToast } from 'vant';

const router = useRouter()
const userInfo = ref<any>({})
const roles = ref<any>({});
const weekSelectionNum = ref(0)
const commissionNum = ref(0)

// 获取用户信息
const GetInfo = async () => {
    const res = await getInfo();
    roles.value = res.data.user.roles[0];
    userInfo.value = res.data.user;
};
const routerTo = (url: string) => {
    if (url === '/bagzhu') {
        showToast('功能开发中，敬请期待')
    } else if (url === '/notice') {
        router.push({
            path: url,
            query: {
                type: '运营部'
            }
        })
    } else {
        router.push({
            path: url,
        })
    }

}
// 周选品次数
const GetWeekCount = async () => {
    const { data = 0 } = await getWeekCount({})
    weekSelectionNum.value = data
}
// 运营部消息统计
const getQueryDeptCount = async () => {
    const { data = {} } = await queryDeptCount({ queryType: 0 })
    commissionNum.value = Number(data?.readCount) + Number(data?.waitCount)
}
onMounted(() => {
    GetInfo();
    GetWeekCount()
    getQueryDeptCount()
})
</script>
<style lang="less" scoped>
.operateMine {
    height: calc(100vh - 50px);
    width: 100%;
    box-sizing: border-box;
    background: #F6FAFF;
    overflow-y: auto;

    .operateMine_top {
        width: 100%;
        background-image: url(@/assets/operation/icon_wodebeijing.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 45px 15px 0;
        box-sizing: border-box;

        .operateMine_top_user {
            width: 100%;
            display: flex;
            margin-top: 30px;
            margin-bottom: 20px;

            .user_img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                margin-right: 20px;
                background: #fff
            }

            .user_box {
                flex: 1;
                min-width: 0;

                .user_box_title {
                    margin: 10px 0;
                    font-weight: 600;
                    font-size: 16px;
                    color: #1A1B1C;
                }

                .user_box_text {
                    font-weight: 400;
                    font-size: 14px;
                    color: #1A1B1C;
                }
            }
        }

        .operateMine_top_frequency {
            width: 100%;
            height: 77px;
            background-image: url(@/assets/operation/icon_zhouxuanpincishu.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            box-sizing: border-box;

            .frequency_label {
                font-weight: 500;
                font-size: 16px;
                color: #FFFFFF;
            }

            .frequency_value {
                font-weight: 400;
                font-size: 14px;
                color: #3549FF;

                span {
                    font-weight: 600;
                    font-size: 28px;
                }
            }
        }
    }

    .operateMine_tabbar {
        padding: 20px 15px;
        box-sizing: border-box;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .operateMine_tabbar_item {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;

            img {
                width: 28px;
                height: 28px;
                margin-bottom: 14px;
            }

            .item_text {
                font-weight: 400;
                font-size: 14px;
                color: #1A1B1C;
            }
        }
    }

    .operateMine_back {
        padding: 15px;
        box-sizing: border-box;

        .operateMine_box {
            width: 100%;
            background: #fff;
            border-radius: 5px;
            padding: 15px;
            box-sizing: border-box;

            .box_title {
                margin-bottom: 28px;
                font-weight: 500;
                font-size: 16px;
                color: #1A1B1C;
            }

            .box_item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 0;
                box-sizing: border-box;

                .box_item_left {
                    display: flex;
                    align-items: center;

                    .left_img {
                        width: 20px;
                        height: 20px;
                        margin-right: 13px;
                    }
                }

                .box_item_right {
                    display: flex;
                    align-items: center;

                    span {
                        width: 28px;
                        height: 20px;
                        line-height: 20px;
                        text-align: center;
                        background: #FC2540;
                        border-radius: 10px;
                        margin-right: 15px;
                        font-weight: 400;
                        font-size: 14px;
                        color: #FFFFFF;
                    }

                    .right_img {
                        width: 7px;
                        height: 12px;
                    }
                }
            }
        }
    }
}
</style>